<template>
  <div class='sensor-list-container'>
    <div class="table-header">
      <el-form :model="requestParam"
               class="search-form">
        <el-row>

          <el-col :span="10"
                  class="search-param"
                  :offset="10"
                  aligh="right">
            <el-form-item prop="sen_type">
              <el-select v-model="requestParam.sen_type"
                         placeholder="请选择传感器类型">

                <el-option v-for="(item, index) in sensorTypeList"
                           :key="index"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="sen_spec">
              <el-select v-model="requestParam.sen_spec"
                         placeholder="请选择传感器规格">

                <el-option v-for="(item, index) in sensorSpecList"
                           :key="index"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="sen_num">
              <el-input v-model="requestParam.sen_num"
                        placeholder="请输入传感器编号">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="4"
                  aligh="right"
                  class="align-right">
            <el-button @click="getSensorList"
                       type="primary">搜索</el-button>
            <el-button @click="editSensor('create',{})"
                       type="primary">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="sensor-table-container">
      <el-table :highlight-current-row='true'
                :header-cell-style="{background:'#f5f5f5'}"
                class="sensor-list-table"
                :data='sensorListData.data'
                border>
        <el-table-column type="index"
                         label="编号"
                         width="50">
        </el-table-column>
        <el-table-column prop='sen_num'
                         label='传感器编号'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='sensor_type_name'
                         label='传感器类型'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='sensor_spec_name'
                         label='传感器规格'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='sen_low'
                         label='读数报警下限'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='sen_upp'
                         label='读数报警上限'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='used_name'
                         label='是否使用'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='project_name'
                         label='所属项目'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作"
                         align='center'
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button @click="editSensor('detail',scope.row)"
                       type="text">查看</el-button>
            <el-button @click="editSensor('update',scope.row)"
                       type="text">修改</el-button>
            <el-button @click="deleteSensorConfirm(scope.row)"
                       type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <EditSensorDialog @callback="editSensorCallback"
                      :dialogVisible.sync="editSensorDialogVisible"
                      :dialogStatus="editSensorDialogStatus"
                      :dialogForm="editSensorDialogForm"></EditSensorDialog>
  </div>
</template>
<script>
import { SensorListApi } from '@/services/EquipmentManage/'
import { standardCodeApi } from '@/services/StandardCode'
import EditSensorDialog from '../EquipmentManage/EditSensorDialog'
export default {
  data () {
    return {
      requestParam: {
        sen_num: '',
        sen_type: '',
        sen_spec: '',
        sort: ''
      },
      sensorListData: {
        data: [],
        total: '',
        current_page: '',
        per_page: ''
      },
      // 编辑传感器弹框是否可见
      editSensorDialogVisible: false,
      // 编辑传感器弹框状态
      editSensorDialogStatus: 'create',
      // 编辑传感器弹框数据
      editSensorDialogForm: {},
      // 传感器类型标准码列表
      sensorTypeList: [],
      // 传感器规格标准码列表
      sensorSpecList: []
    }
  },
  components: {
    EditSensorDialog
  },
  methods: {
    // 获取传感器列表
    getSensorList () {
      SensorListApi.getSensorList({
        params: this.requestParam
      }).then(res => {
        let data = res.data
        if (data.data) {
          this.sensorListData = data
          this.sensorListData.data.map(item => {
            item.sensor_type_name = this.getSensorTypeName(item.sen_type)
            item.sensor_spec_name = this.getSensorSpecName(item.sen_spec)
          })
          // console.log(this.sensorListData, 'get sensor list')
        }
      }, err => {
        console.log(err)
      })
    },

    // 根据状态展示新增或编辑传感器弹框
    editSensor (status, data) {
      this.editSensorDialogVisible = true
      this.editSensorDialogStatus = status
      this.editSensorDialogForm = data
    },
    // 删除传感器
    deleteSensorConfirm (row) {
      let deleteSensorParam = {
        id: row.sensor_id,
        sensor_id: row.sensor_id
      }
      this.$confirm('是否删除该传感器？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteSensor(deleteSensorParam)
      }).catch(() => {

      })
    },
    deleteSensor (data) {
      SensorListApi.deleteSensor({
        data: data
      }).then(res => {
        //console.log(res, 'delete sensor')
        if (res.code === 0) {
          this.$message.success('删除成功')
          this.getSensorList()
        }
      }, err => {
        console.log(err)
      })
    },
    // 编辑传感器弹框成功回调
    editSensorCallback () {
      this.getSensorList()
    },
    // 获取传感器类型标准码
    getSensorTypeCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'sensor_type'
        }
      }).then(res => {
        //console.log(res, 'get sensor type')
        if (res.code === 0) {
          this.sensorTypeList = res.data.list;
          this.sensorTypeList.unshift({ name: '全部', value: '' });
          window.localStorage.setItem('sensorTypeList', JSON.stringify(this.sensorTypeList))
        }
      })
    },
    // 根据传感器类型value获取name
    getSensorTypeName (value) {
      let name = ''
      this.sensorTypeList.map((item) => {
        if (Number(item.value) === value) name = item.name
      })
      return name
    },
    // 获取传感器规格标准码
    getSensorSpecCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'sensor_spec'
        }
      }).then(res => {
        //console.log(res, 'get sensor spec')
        if (res.code === 0) {
          this.sensorSpecList = res.data.list;
          this.sensorSpecList.unshift({ name: '全部', value: '' })
          window.localStorage.setItem('sensorSpecList', JSON.stringify(this.sensorSpecList))
        }
      })
    },
    // 根据传感器规格value获取name
    getSensorSpecName (value) {
      let name = ''
      this.sensorSpecList.map((item) => {
        if (item.value === value) name = item.name
      })
      return name
    }
  },
  async created () {
    await this.getSensorTypeCode()
    await this.getSensorSpecCode()
    this.getSensorList()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.sensor-list-container {
  padding: 20px;
  .table-header {
    .search-form {
      .search-param {
        display: flex;
        justify-content: space-between;
        .el-form-item {
          width: 30%;
        }
      }
    }
  }
}
</style>
